<template>
  <div>
    <div class="space"></div>
    <el-row type="flex" class="create-input" justify="center" align="middle">
      <el-col :span="19" style="text-align: center;margin-bottom:20px">
        <el-steps :space="200" :active="createStep">
          <el-step title="步骤 1" description="选择告警对象" class="alarm-create-step"></el-step>
          <el-step title="步骤 2" description="关联告警策略" class="alarm-create-step"></el-step>
          <el-step title="步骤 3" description="发送设置" class="alarm-create-step alarm-create-step-last"></el-step>
        </el-steps>
      </el-col>
    </el-row>
    <div>
    <router-view @changeStep="changeStep"></router-view>
    </div>
  </div>
</template>
<script>
  import { Tabs, Table, TableColumn, Button, Dialog , Input, Row, Col, Pagination, Steps, Step} from 'element-ui'
  export default {
    data () {
      return {
        createStep: 1,
        systemName: ''
      }
    },
    methods: {
      changeStep (v, name) {
        this.createStep = v
        this.systemName = name
      }
    },
    components: {
      'el-steps': Steps,
      'el-step': Step,
      'el-row': Row,
      'el-col': Col
    }
  }  
</script>
<style lang="scss" scoped>
  .space {
    height: 40px;
  }
  .alarm-create-step {
    width: 45%!important;
  }
  .alarm-create-step-last {
    width: 10%!important;
  }
</style>
